.squaresContainer {
  width: 100%;
  display: inline-block;
  /*background-color: lightblue;*/
  /*padding: 1.66%;*/
}

.squaresContainer p {	margin: 10px 0 10px}

.square {
  float: left;
  position: relative;
  width: 33%;
  /*padding-right:20%;
  padding-left:1%;*/
  padding-bottom: 19%; /* = width for a 1:1 aspect ratio */
  /*margin-right:3.33%;*/
  margin: 0.5px;
  /*background-color: #f1f1f1;*/
  color: #606060;
  border-bottom: 1px solid #C0CACB;
  overflow: hidden;
}

.square.fwd {
    background-image: url(img/edpicon-puscica-desno-gray.svg);
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: bottom;
}
.square.fwd1 {
    background-image: url(img/edpicon-puscica-desno-white.svg);
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: bottom;
}

.square.blue
{
    color: white;
    background-color: #5198B4;
    padding-left: 12px; /*center blue icons*/
}


.squareHoverContainer :hover {
  background-color: #eaeaea;
  /*background-color: #fafafa;
  opacity: 0.9;*/
}

/* TODO: za odstranit notranji hover pravokotnik
.squareHoverContainer .table-cell :hover {
    background-color: initial;
}
*/

.editing .squareHoverContainer :hover {
  background-color: transparent;
    /*opacity: 0.9;*/
}

.squareHoverContainerblue :hover {
    /*background-color: initial;*/
  opacity: 0.9;
}

.content {
  position: absolute;
  height: 90%; /* = 100% - 2*5% padding */
  width: 90%; /* = 100% - 2*5% padding */
  margin-right: 3.33%;
  margin-left: 3.33%;
}


.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
}

html.mobile .table-cell {padding-top:2px;}


/*  For responsive images */

.content .rs {
  width: auto;
  height: auto;
  max-height: 90%;
  max-width: 100%;
}
/*  For responsive images as background */

.bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
  /*color: #fff;*/
}

@media screen and (max-width: 768px ) {
  .square {
    padding-bottom: 25%;
  }
}

@media screen and (max-width: 600px ) {
  .square {
    margin: 1.66%;
    width: 100%;
    margin-left: auto;
    padding-bottom: 20%;
  }
}
	
@media screen and (max-width: 576px) {
  .square { padding-bottom: 30%; }
}

@media screen and (max-width: 466px) {
  .square { padding-bottom: 42%; }
}